var img = new Image();
img.src = 'https://mdn.mozillademos.org/files/4553/Capitan_Meadows,_Yosemite_National_Park.jpg';

var canvasXSize = 800;
var canvasYSize = 200;
var speed = 30;
var scale = 1.05;
var y = -4.5;

var dx = 0.75;
var imgW;
var imgH;
var x = 0;
var clearX;
var clearY;
var ctx;

img.onload = function() {
    imgW = img.width * scale;
    imgH = img.height * scale;
    if (imgW > canvasXSize) {
        x = canvasXSize - imgW;
    }
    if (imgW > canvasXSize) {
        clearX = imgW;
    }
    else {
        clearX = canvasXSize;
    }
    if (imgH > canvasYSize) {
        clearY = imgH;
    }
    else {
        clearY = canvasYSize;
    }
    ctx = document.getElementById('tutorial').getContext('2d');
    return setInterval(draw, speed);
};

function draw() {
    ctx.clearRect(0, 0, clearX, clearY);
    if (imgW <= canvasXSize) {
        if (x > (canvasXSize)) {
            x = 0;
        }
        if (x > (canvasXSize - imgW)) {
            ctx.drawImage(img, x - canvasXSize + 1, y, imgW, imgH);
        }
    }
    else {
        if (x > (canvasXSize)) {
            x = canvasXSize - imgW;
        }
        if (x > (canvasXSize - imgW)) {
            ctx.drawImage(img, x - imgW + 1, y, imgW, imgH);
        }
    }
    ctx.drawImage(img, x, y, imgW, imgH);
    x += dx;
}
